$(function () {
    // 参数设置为全局对象，因为将来筛选和分页都要用！
    let q = {
        pagenum: 1,     // 是	int	    页码值
        pagesize: 2,   // 是	int	    每页显示多少条数据
        cate_id: "",    // 否	string	文章分类的 Id
        state: "",      // 否	string	文章的状态，可选值有：已发布、草稿
    }

    // 需求1: 初始化文章列表 - 封装成函数，将来复用：
    let layer = layui.layer;
    initArticleList();// 调用初始化文章列表
    function initArticleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            // GET类型用params属性，POST类型用data属性;
            params: q
        }).then(res => {
            console.log(res.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message);
            }
            // 渲染
            let arr = [];
            res.data.data.forEach(ele => {
                arr.push(`
                    <tr>
                        <td>${ ele.title}</td>
                        <td>${ ele.cate_name}</td>
                        <td>${ ele.pub_date}</td>
                        <td>${ ele.state}</td>
                        <td>
                            <button class="layui-btn layui-btn-xs">编辑</button>
                            <button data-id="${ ele.Id}" class="del-btn layui-btn layui-btn-xs layui-btn-danger">删除</button>
                        </td>
                    </tr>
                `);
            });
            // 循环结束后，赋值
            $("tbody").empty().html(arr.join(""));
            // 分页
            renderPage(res.data.total);
        });
    }

    // 需求2: 渲染筛选中的文章类别列表;
    let form = layui.form;
    initArtCateList(); // 函数不调用不执行
    function initArtCateList() {
        axios({
            url: '/my/article/cates'
        }).then(res => {
            // console.log(res);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message);
            }
            // 成功，渲染
            let arr = ['<option value="">请选择文章所属分类</option>'];
            res.data.data.forEach(ele => {
                arr.push(`
                <option value="${ele.Id}">${ele.name}</option>
                `);
            });
            // 循环结束赋值
            let str = arr.join('');
            $("[name=cate_id]").empty().html(str);
            // form.render();可以渲染layui中的 select/checkbox/radio
            form.render();
        })
    }

    // 需求3: 筛选
    $("#searchForm").on('submit', function (e) {
        e.preventDefault();
        // cate_id和state的值修改，根据form表单里面的值修改
        q.cate_id = $("[name=cate_id]").val();
        q.state = $("[name=state]").val();
        // 重新渲染 文章列表
        initArticleList();
    })

    // 需求4：分页
    function renderPage(total) {
        let laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'pageBox',  //注意，这里的 test1 是 ID，不用加 # 号
            count: total, //数据总数，从服务端得到
            limit: q.pagesize, // 每页显示多少条
            curr: q.pagenum, // 第几页
            // 显示区域
            layout: ['count', 'limit', 'prev', 'page', 'next', 'refresh', 'skip'],
            limits: [2, 3, 5, 10],
            // 页面加载的时候，页码切换的时候会触发，每页显示条数改变的时候会触发
            jump: function (obj, first) {
                // //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数
                //首次不执行
                if (!first) {
                    // 把当前页改变，把条数改变，重新渲染文章列表
                    q.pagenum = obj.curr;
                    q.pagesize = obj.limit;
                    initArticleList();
                }
            }
        });
    }

    // 需求5: 删除 - 事件委托/类名/id;
    $("tbody").on('click', '.del-btn', function () {
        let id = $(this).attr('data-id');
        //eg1
        layer.confirm('是否确定删除?', { icon: 3, title: '提示' }, function (index) {
            // 删除的ajax
            axios({
                method: 'GET',
                //   /保留，:删除
                url: '/my/article/delete/'+id,
            }).then(res => {
                if (res.data.status !== 0) {
                    return layer.msg(res.data.message);
                }
                // 成功，提示，刷新页面
                layer.msg('恭喜您，删除文章成功！');

                // （删除ajax成功后）当我们再次发起请求的时候，如果页面中还有一条数据，当前页--，当前页大于等于2有资格 --
                // if ($(".del-btn").length == 1 && q.pagenum >= 2) q.pagenum--;
                // 优化 - 短路运算，前面的代码满足条件，后面的才会执行！
                $(".del-btn").length == 1 && q.pagenum >= 2 && q.pagenum--;

                initArticleList();
            })
            layer.close(index);
        });
    })


});